/*
 * @Description: 支付失败
 * @Author: ziwei.ma
 * @Date: 2019-08-22 15:24:08
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-08-24 00:02:14
 */
<template>
  <div class="result_wrapper flex-v flex-vc">
    <img
      src="../assets/failed.png"
      class="flex-hc"
    >
    <div class="flex-v flex-vc">
      <div class="fontsize48 baseColorNoAcitve">支付失败</div>
      <span class="fontsize32">支付遇到问题，请尝试重新支付</span>
    </div>
    <div class="flex-v btn_wrapper">
      <div
        class="pay_again_btn baseBgColorWithActive fontsize32"
        @click="payAgain"
      >重新支付</div>
      <div
        class="cancel_btn fontsize32 baseColorNoAcitve"
        @click="cancel"
      >取消</div>
    </div>
  </div>
</template>

<script>
import { getPaymentStr, getCRPaymentStr } from '../api/api'
import { getUrlParamByKey } from 'vue-xiaobu-utils'
export default {
  components: {

  },
  props: {
    payFromUrl: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      isClicked: false// 支付按钮点击状态
    }
  },
  methods: {
    // 再次拉起支付
    payAgain() {
      // 从链接之中获取包车预约单订单号
      let orderNO = getUrlParamByKey('orderNO')
      // 从链接之中获取包车定制班线订单号和支付方式
      let CRorderNO = getUrlParamByKey('CR_orderNO')
      let CRpayment = getUrlParamByKey('CR_payment')
      if (!this.isClicked) {
        this.isClicked = true
        setTimeout(() => {
          this.isClicked = false
        }, 3000)
        // 传订单号请求协议，获取支付方式和支付串
        // 如果定制版订单号存在，则走定制班线的支付流程，否则走包车支付流程
        if (CRorderNO) {
          // 定制班线支付协议
          getCRPaymentStr(CRorderNO, CRpayment).then(res => {
            window.doPaymentByType(CRpayment, res.PAYMENT_STR, () => {
              this.$AppRouterUtils.open('paymentResult.html?_bbv=false&CR_orderNO=' + CRorderNO + '&paymentStatu=' + 1)
            }, () => {
              this.isClicked = false
            }).catch(err => {
              this.isClicked = false
              console.dir(err)
            })
          })
        } else {
          // 包车订单支付协议
          getPaymentStr(orderNO).then(res => {
            // 调起支付
            window.doPaymentByType(res.payment, res.paymentStr, () => {
              this.$AppRouterUtils.open('paymentResult.html?_bbv=false&orderNO=' + res.orderNO + '&paymentStatu=' + 1)
            }, () => {
              this.isClicked = false
            }).catch(err => {
              this.isClicked = false
              console.dir(err)
            })
          })
        }
      }
    },
    cancel() {
      this.$AppRouterUtils.goBack(this.payFromUrl)
    }
  }
}
</script>

<style scoped>
.result_wrapper {
  height: 100%;
  width: 100%;
}
.result_wrapper > img {
  width: 200px;
  height: 200px;
  margin: 64px;
}
.result_wrapper > div > span {
  color: #666666;
  margin: 16px 80px 0;
  text-align: center;
}
.btn_wrapper {
  position: fixed;
  bottom: 212px;
  text-align: center;
}
.pay_again_btn {
  width: 686px;
  height: 72px;
  line-height: 72px;
  border-radius: 36px;
  color: #ffffff;
  margin-bottom: 16px;
}
.cancel_btn {
  width: 686px;
  height: 72px;
  line-height: 72px;
  border-radius: 36px;
  border: 1px solid #027aff; /*no*/
}
</style>
